<template id="payNum">
  <div class="payNum">
    <div class="payNum-content row bg_ff">
      <p>缴费编号</p>
      <input class="iptNum col" type="text" placeholder="请输入您的缴费编号" v-model="iptNum">
    </div>

    <div class="next-btn">
      <button class="payNum-btn" @click="goPage('/mine/myInfo_payDetail')">下一步</button>
    </div>
  </div>
</template>

<script>
  import { MessageBox } from 'mint-ui';

  export default {
    data () {
      return {
        urlObj: {},
        iptNum: ''
      }
    },
    methods: {
      goPage: function (url) {
        if(this.validTest()){
          var options = {
            corpId: this.urlObj.corpId,
            projectId: this.urlObj.projectId,
            feeId: this.iptNum
          };
          var that = this;
          this.$post(this.$urlAll.other_query_detail, options).then(function (response) {

            //不存在该用户  或者你当前没有要缴费的项目
            if(response.status == 'YHBCZ' || response.status == 'MYJFXM'){
              MessageBox('提示', response.msg);
            }

            //等待后台复核！
            if(response.status == 'YJFXM'){

              that.$router.push({path: url});
              sessionStorage.setItem('payNumArr', JSON.stringify(response.t.paymentList1));
            }

          })
        }
      },

      validTest: function () {
        var testForm = true;
        if(this.iptNum == ''){
          DbsAlert.show({
            title: '提示',
            text: '缴费编号不能为空'
          });
          return testForm = false;
        }

        return testForm;
      }
    },
    //获取后台数据，dom渲染之前
    created: function(){
        this.urlObj = this.$route.query;
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../../style/common.css";
  .payNum-content{
    height: 0.44rem;
    align-items: center;
    margin-top: 0.1rem;
  }
  .payNum-content>p{
    width:0.87rem;
    padding-left: 0.1rem;
    color: #333333;
    flex:none;
  }
  .payNum-content .iptNum{
    border: none;
  }
  input::-webkit-input-placeholder { /* WebKit browsers*/
    color:#999999;
    font-size: 0.13rem;
  }
  input:-moz-placeholder {  /* Mozilla Firefox 4 to 18*/
    color:#999999;
    font-size: 0.13rem;
  }
  input::-moz-placeholder {  /* Mozilla Firefox 19+*/
    color:#999999;
    font-size: 0.13rem;
  }
  input:-ms-input-placeholder { /* Internet Explorer 10+*/
    color:#999999;
    font-size: 0.13rem;
  }
  .next-btn{
    text-align: center;
  }
  .payNum-btn{
    width:calc(100% - 0.82rem);
    margin-top: 1.39rem;
    font-size: 0.16rem;
    height: 0.44rem;
    border: 0;
    -webkit-border-radius: 0.02rem;
    -moz-border-radius: 0.02rem;
    border-radius: 0.05rem;
    outline:none;
    background: #ff4444;
    color: #ffffff;
  }
  .payNum-btn:active{
    background: #dd4444;
  }
</style>
